<template>
    <el-row type="flex" justify="center" style="height: 100%;width: 100%;" align="middle">
        <el-col :span="24">
            <el-upload :limit="5" ref="uploadRef" drag action="/api/image/upload?label=4"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    将图片拖入此处或者<em> 点击此处选择图片</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        jpg/png文件小于5mb
                    </div>
                </template>
            </el-upload>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ElMessage, type UploadFile, type UploadProps } from 'element-plus'
import type { UploadInstance } from 'element-plus'
import { ref } from 'vue';

const uploadRef = ref<UploadInstance>()

const handleRemove: UploadProps['onRemove'] = (file: UploadFile) => {
    console.log(file)
}

const handlePictureCardPreview: UploadProps['onPreview'] = () => {

}

const handleAvatarSuccess: UploadProps['onSuccess'] = () => {
    ElMessage.success("图片上传成功！")
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片大小不得超过5MB！')
        return false
    }
    return true
}

</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.header_register {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>